log = console.log;
var vm = new Vue({
  el:"#app",
  data:{
    //公共头部
    categories_top:[],//下拉分类
    nav_top:[],//nav
    image_top:{},

    alldata:[],
    carousels:[],//carousels 轮播数据
    activities:[],//主要有两类数据，活动展示（推荐和热卖） 和 其余是商品展示
    activityImage:{},//neighbour carousel
    centerImage:{},//middle of page
    productShow:[],//商品展示
    //区分商品展示数据
    productShow1:[],//品牌家具
    productShow2:[],//风格分区 styles.length <1
    productShow3:[],//灯饰卫具
    productShow4:[]//家具饰品

    //filter articles via style and category
    //--/getProducts.anon
    ,mallShowId:undefined
    ,categoryId:undefined
    ,styleId:undefined
    ,pageSize:8
    ,pageNo:1


  },
  created:function(){
    this.$nextTick(function(){
      //头部公用数据
      $.ajax({
        type:"post",
        data:{},
        dataType:"json",
        url:"/getMallTop.anon",
        success:function(data){
          if(data.status){
            var datas = data.data;
            vm.categories_top = datas.categories;
            vm.nav_top = datas.navbars;
            vm.image_top = datas.topImage;
          }else{

          }
        }
      })

      //首页商品相关数据
      $.ajax({
        type:"post",
        data:{},
        dataType:"json",
        url:"/getMallIndex.anon",
        success:function(data){
          if(data.status){
            var datas = data.data;
            vm.alldata = datas;

            vm.carousels = datas.carousels;
            vm.activities = [datas.activities.slice(0,2)];

            vm.productShow = datas.productShow;//设计图只有4个
            if(datas.productShow.length > 4){
              vm.productShow = [datas.productShow.slice(0,4)];
            }

            vm.productShow1 = datas.productShow[0];//品牌家具
            vm.productShow2 = datas.productShow[0];//风格分区
            vm.productShow3 = datas.productShow[0];//灯饰卫具
            vm.productShow4 = datas.productShow[0];//家具饰品

            // vm.productShow.forEach(function(item,index,oarray){
            //   if(item.styles.length > 0){
            //     vm.productShow2 = datas.productShow[1];
            //   }
            // })

            vm.activityImage = datas.activityImage;
            vm.centerImage = datas.centerImage;

            vm.carousel();

          }else{

          }
        }
      })
    })
  },
  mounted:function(){
    this.$nextTick(function(){

    })
  },
  methods:{

    //hover category
    // categoryover:function(event){
    //   event.stopPropagation();
    //   if(event){
    //     log("mouse over")
    //
    //   }
    // }
    // ,
    // categoryout:function(event){
    //   event.stopPropagation();
    //
    //   if(event){
    //     log("mouse out")
    //
    //   }
    // }

    //click style-partition reassignment
    styleReassign:function(e){
      var $this = $(e.currentTarget);
      $this.addClass("style-partition-active").siblings().removeClass("style-partition-active");
      this.styleId = $this.attr("styleid");
      this.mallShowId = $this.parents(".jsgoods-show").attr("mallshowid");

      var params = {
        data:{

          mallShowId:this.mallShowId
          ,categoryId:this.categoryId
          ,styleId:this.styleId
          ,pageSize:this.pageSize
          ,pageNo:this.pageNo
        }
        ,reassignProductShow:vm.productShow1.products
      }
      vm.submitCategoryFilter(params);

      console.log("styleReassign=="+999999)

    },
    //点击商品种类时过滤展示商品
    filterProductsByCategory:function(e){
      var $this = $(e.currentTarget);
      $this.addClass("classify-secondary-active").siblings().removeClass("classify-secondary-active");
      var sectionJudge = $this.parents(".jsgoods-show").data("section");
      var categoryId = $this.data("categoryid");
      var mallShowId = $this.parents(".jsgoods-show").data("mallshowid");
      var styleId = "";
      if(sectionJudge != "stylePartition"){
      }else{
        styleId = $this.parents(".jsgoods-show").data("styleid");//记得在html设置data-styleid
      }
      var params = {
          data:{
            mallShowId:mallShowId
            ,categoryId:categoryId
            ,styleId:styleId
            ,pageSize:this.pageSize
            ,pageNo:this.pageNo
          }
          ,sectionJudge:sectionJudge
      }
      vm.filterProductsAjax(params);
    },
    filterProductsAjax : function(params){//公用
      $.ajax({
        type:"post",
        dataType:"json",
        url:"/getProducts.anon",//depend on mallShowId 风格 种类 pageNo pageSize
        data:params.data,
        success:function(data){
          if(data.status){
            productShowChange({"sectionJudge":params.sectionJudge,products:data.data.products});
          }else{
            productShowChange({"sectionJudge":params.sectionJudge,products:[]});
          }

          function productShowChange(paramsObj){
            switch(paramsObj.sectionJudge){
              case "famouseLabel"://品牌家具
                vm.productShow1.products = paramsObj.products;
                console.log("vm.productShow1.products==",vm.productShow1.products)
                break;
              case "stylePartition"://风格分区
                vm.productShow2.products = paramsObj.products;
                console.log("vm.productShow2.products==",vm.productShow2.products)

                break;
              case "lamps":
                vm.productShow3.products = paramsObj.products;
                console.log("vm.productShow3.products==",vm.productShow3.products)

                break;
              case "furnitureDecorations":
                vm.productShow4.products = paramsObj.products;
                console.log("vm.productShow4.products==",vm.productShow4.products)

                break;
              default:
                break;
            }
          }
        }
      })
    }
    ,
    //轮播
    carousel:function(){//轮播

      var $carousel  = $(".carousel");
      var $pagination_btn = $(".pagination-btn");

      //var focusImages = [1, 2, 3];
      var focusImages = vm.carousels;
      var firstFocusImage = focusImages[0];
      var lastFocusImage = focusImages[focusImages.length - 1];
      var duplicate_focusImages = new Array(focusImages);
      duplicate_focusImages.unshift(lastFocusImage);
      duplicate_focusImages.push(firstFocusImage);
      var strHtml_focusImages = "";
      var strBtns = "";
      focusImages.forEach(function(item,index,oarr){
        strBtns += '<li class="pagination-btn-li" >'+(index+1)+'</li>';
      })
      $pagination_btn.html(strBtns);

      $pagination_btn.find(".pagination-btn-li").eq(0).addClass("active-carousel");

      focusImages.forEach(function (item,ind,oriArr){
        strHtml_focusImages += '<li class="carousel-li og-bdr"><a href="item.href"><img src="'+item.image+'" alt=""/></a></li>';
      })

      $carousel.html(strHtml_focusImages);

      var perPicWidth = $($(".carousel .carousel-li")[0]).width();
      var currentIndex = $(".pagination-btn li[class*='active-carousel']").index();

      // click paginations'btn
      $(".pagination-btn").on("click",".pagination-btn-li",function(e){
        e.stopPropagation();
        var $this = $(this);
        currentIndex = $this.index();
        $carousel.animate({"marginLeft" : -(perPicWidth * currentIndex)},300);
        $this.addClass("active-carousel").siblings().removeClass("active-carousel");
      })

      //previous
      $(".previous-btn").click(function(e){
        e.stopPropagation();
        currentIndex --;
        if(currentIndex < 0){
          currentIndex = 0;
          return false;
        }else{
          $carousel.animate({"marginLeft" : -(perPicWidth * currentIndex)},300);
          $(".pagination-btn .pagination-btn-li").eq(currentIndex).addClass("active-carousel").siblings().removeClass("active-carousel");
        }
      })

      //next
      $(".next-btn").click(function(e){
        e.stopPropagation();
        currentIndex ++;
        if(currentIndex > (focusImages.length-1)){
          currentIndex = (focusImages.length-1);
          return false;
        }else{
          $carousel.animate({"marginLeft" : -(perPicWidth * currentIndex)},300);
          $(".pagination-btn .pagination-btn-li").eq(currentIndex).addClass("active-carousel").siblings().removeClass("active-carousel");
        }
      })

      //automatic loop
      var t1;
      function automaticLoop(){
        t1 = setInterval(function(){
          currentIndex ++ ;
          if(currentIndex > 3){
            currentIndex = 0;
          }
          $carousel.animate({"marginLeft" : -(perPicWidth * currentIndex)},300);
          $(".pagination-btn .pagination-btn-li").eq(currentIndex).addClass("active-carousel").siblings().removeClass("active-carousel");
        },5000)
      }

      automaticLoop();

      $("#carousel_block").mouseenter(function(){
        clearInterval(t1);
      })

      $("#carousel_block").mouseleave(function(){
        automaticLoop();
      })

    }

  }


});

$(function(){
  //底部数据
  $.ajax({
    type:"post",
    data:{},
    dataType:"json",
    url:"/getFooterData.anon",
    success:function(data){
    }
  })

  /*************************** 购物车****************************/
  $(".jscart").on("mouseenter",function(e){
    e.stopPropagation();
      $(".jscart-dropdown").slideDown(500);
      return false;
  })
  $("html,body").on("click",function(e){
    e.stopPropagation();
    $(".jscart-dropdown").slideUp(500);
    return false;
  })

  //click  去结算 and settlement btn!
  $(".jscartbtn,.jssettlement").on("click",function(e){
    e.stopPropagation();
    alert("go to settlement page!");
  })


  /*************************** 全部商品分类 ***************************/
  $(".jsarticles-block-btn").click(function(e){
      e.stopPropagation();
      $(".jsarticles-dropdown").slideToggle(300);
  })

  //hover category list
  // $('html,body').on("hover"," .dropdown-section",function(e){//
  //   e.stopPropagation();
  //   var $this = $(this);
  //   $this.find(".jsarticles").css("display","block");
  // },function(){
  //   var $this = $(this);
  //   $this.find(".jsarticles").css("display","none");
  // });







  //tangcc test
  //carousel
  // var $carousel  = $(".carousel");
  // var $pagination_btn = $(".pagination-btn");
  //
  // var focusImages = [1, 2, 3];
  // var duplicate_focusImages = [];
  // duplicate_focusImages = duplicate_focusImages.concat(focusImages);
  // duplicate_focusImages.push(focusImages.slice(0,1)[0]);
  // duplicate_focusImages.unshift(focusImages.slice(-1)[0]);
  //
  // //图片
  // var strHtml_focusImages = "";
  // duplicate_focusImages.forEach(function (item,ind,oriArr){
  //     strHtml_focusImages += '<li class="carousel-li og-bdr">'+ item +'</li>';
  // })
  // $carousel.html(strHtml_focusImages);
  // //宽
  // var perPicWidth = $($(".carousel .carousel-li")[0]).width();
  // $carousel.css("marginLeft",-perPicWidth);
  //
  // //按钮
  // var strBtns = "";
  // focusImages.forEach(function(item,index,oarr){
  //   strBtns += '<li class="pagination-btn-li" >'+(index+1)+'</li>';
  // })
  // $pagination_btn.html(strBtns);
  // $pagination_btn.find(".pagination-btn-li").eq(0).addClass("active-carousel");
  //
  // //索引
  // var currentIndex = $(".pagination-btn li[class*='active-carousel']").index();
  // // click paginations'btn
  //
  // // //next
  // //var flag = false;
  // $(".next-btn").click(function(e){
  //     e.stopPropagation();
  //       var nowmarginleft = parseFloat($carousel.css("marginLeft"));
  //       currentIndex ++;
  //     if(currentIndex > (focusImages.length-1)){
  //       $(".carousel").append($(".carousel .carousel-li").eq(2).clone());
  //
  //       $carousel.animate({"marginLeft" :  nowmarginleft - perPicWidth },300);
  //
  //
  //
  //             $(".carousel .carousel-li").eq(0).animate({"width":0},300).remove();
  //
  //
  //     }else{
  //       $carousel.animate({"marginLeft" :  nowmarginleft - perPicWidth },300);
  //
  //     }
  //
  //
  //
  //     //不用管
  //     $(".pagination-btn .pagination-btn-li").eq(currentIndex).addClass("active-carousel").siblings().removeClass("active-carousel");
  //
  // })









  function throttle(fn,interval,context){
    clearTimeout(fn.t1);
    fn.t1 = setTimeout(function(){
        fn.apply(context,arguments)
    },interval);
  }

  $(window).scroll( function() {
    throttle(queryOffset,100);
  });

  var $btn_recommendation = $("#btn_recommendation");
  var btn_recommendation_left = $btn_recommendation.offset().left;
  var $goods = $("#goods");
  var width__goods = $goods.width() + 15;
  var positionTop__btn_recommendation = $btn_recommendation.position().top;

  function queryOffset(){
    var scrollTop_window = $(window).scrollTop();
    if(scrollTop_window > 940){
      $btn_recommendation.css({"position":"fixed","left":btn_recommendation_left,top:50});
    }else{
      $btn_recommendation.css({"position":"absolute","left" : width__goods, top : positionTop__btn_recommendation});
    }
  }

  /*推荐按钮*/
  $("#btn_recommendation li").click(function (e){
      e.stopPropagation();
      var $this = $(this);
      var _index = $this.index();
      $this.addClass("btn-recom-selected").siblings().removeClass("btn-recom-selected");
      var top = $("#goods .goods-listing").eq(_index).offset().top;
      $("html,body").animate({scrollTop: (top - 50) + "px"}, 200);
  })
})
